<template>
 <div>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[2,100, 200, 300, 400]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-table v-loading="loading" :data="advertisingList" @selection-change="handleSelectionChange">
          <el-table-column
              prop="expressVendingMachines.address"
              label="柜箱地址"
              width="180">
          </el-table-column>
          <el-table-column
              prop="expressVendingMachines.machineCode"
              label="柜箱编码"
              width="180">
          </el-table-column>
          <el-table-column
              prop="expressVendingMachines.location"
              label="柜箱所在地区"
              width="180">
          </el-table-column>
          <el-table-column
              prop="expressList.name"
              label="送件人姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="expressList.phone"
              label="送件人手机号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="expressAccount.id"
              label="取件人姓名">
          </el-table-column>
          <el-table-column
              prop="expressAccount.phone"
              label="取件人手机号">
          </el-table-column>
          <el-table-column
              prop="qujianma"
              label="取件码">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态">
            <!--template:模板 自定义展示内容-->
            <template slot-scope="scope">
              {{scope.row.status===1?'待取件':scope.row.status===2?'已取件':scope.row.status===3?'待留件':scope.row.status===4?'已撤回':scope.row.status===5?'已超时':'已完结'}}
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">详细</el-button>
              <div v-if="scope.row.status===1||scope.row.status===3 || scope.row.status===4 || scope.row.status===5 || scope.row.status===6">
                <el-button @click="cuiqu(scope.row)"  type="text" size="small" >催促快递员送件</el-button>
              </div>
              <div v-if="scope.row.status===1||scope.row.status===3 || scope.row.status===4 || scope.row.status===5 || scope.row.status===6">
                <el-button @click="chongfa(scope.row)"  type="text" size="small">重发取件码</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="open" width="100%"  append-to-body>
          <div>
            <h1>柜机信息</h1>
            <el-descriptions title="柜机信息">
              <el-descriptions-item label="柜机编码">{{this.expressVendingMachines.machineCode}}</el-descriptions-item>
              <el-descriptions-item label="柜机地址">{{this.expressVendingMachines.address}}</el-descriptions-item>
              <el-descriptions-item label="柜机位置">{{this.expressVendingMachines.mac}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <h1>收件人信息</h1>
            <el-descriptions title="收件人信息">
              <el-descriptions-item label="取件人">{{this.expressAccount.id}}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{this.expressAccount.phone}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <h1>派件人信息</h1>
            <el-descriptions title="派件人信息">
              <el-descriptions-item label="派件人">{{this.expressList.name}}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{this.expressList.phone}}</el-descriptions-item>
              <el-descriptions-item label="快递公司">{{this.expressList.postCompany}}</el-descriptions-item>
              <el-descriptions-item label="快递公司">{{this.expressList.expresscode}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <h1>收款信息</h1>
            <el-descriptions title="收款信息">
              <el-descriptions-item label="派件费">{{this.expressPaymentRecords.deliveryFee}}</el-descriptions-item>
              <el-descriptions-item label="优惠">{{this.expressPaymentRecords.discountAmount}}</el-descriptions-item>
              <el-descriptions-item label="实付款">{{this.expressPaymentRecords.actualPayment}}</el-descriptions-item>
              <el-descriptions-item label="费用类型">{{this.expressPaymentRecords.paymentCurrency===1?'CNY':'PHP'}}</el-descriptions-item>
              <el-descriptions-item label="支付方式">{{this.expressPaymentRecords.paymentChannels===1?'支付宝':'微信'}}</el-descriptions-item>
              <el-descriptions-item label="支付时间">{{this.expressPaymentRecords.overTime}}</el-descriptions-item>
              <el-descriptions-item label="交流号">{{this.expressPaymentRecords.orderNo}}</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <h1>时间</h1>
            <el-timeline>
              <el-timeline-item
                  v-for="(activity, id) in timeline"
                  :key="id"
                  :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-dialog>
 </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      shijian: null,
      idg: [],
      //开关
      open1: false,
      open3: false,
      open4: false,
      open5: false,
      open6: false,
      // 非单个禁用
      single: true,
      open2: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      advertisingList: [],
      ExpressPaymentRecords:{},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 2,
      },
      // 表单参数
      form: {},
      expressAccount:{
        id:null,
        type:null,
        phone:null,
        accountBalance:null,
        availableBalance:null,
        duein:null,
        freeze:null,
        creationTime:null,
        recentLoginTime:null,
        status:null,
        registerIp:null,
      },
      // 表单校验
      rules: {},
      expressList:{
        createBy:null,
        createTime:null,
        updateBy:null,
        updateTime:null,
        remark:null,
        id:null,
        name:null,
        registrationType:null,
        createDate:null,
        postCompany:null,
        registerIp:null,
        balance:null,
        verification:null,
        status:null,
        phone:null,
        areaCode:null,
        photo:null,
        changeDate:null,
        isDel:null,
        password:null,
        payPassword:null,
        account:null,
        email:null,
        expresscode:null,
      },
      expressPaymentRecords:{
        id:null,
        transactionNumber:null,
        type:null,
        phone:null,
        orderType:null,
        orderNo:null,
        payableAmount:null,
        paymentChannels:null,
        paymentCurrency:null,
        actualPayment:null,
        exchangeRate:null,
        createTime:null,
        overTime:null,
        status:null,
        deliveryFee:null,
        discountAmount:null,
        paymentAccount:null,
      },
      expressVendingMachines:{
        id:null,
        sn:null,
        machineCode:null,
        MolinboxC903:null,
        location:null,
        address:null,
        isModel:null,
        mac:null,
        installDate:null,
        openDate:null,
        storageStatus:null,
        boxStatus:null,
        machineStatus:null,
        isDel:null,
      },
      timeline:[],
      activeIndex: '9',
      name: sessionStorage.getItem("name"),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleClick(data){
      console.log("1111111111111111111")
      this.form=data;
      this.timeline=this.form.timeline;
      console.log(this.timeline)
      this.expressVendingMachines=this.form.expressVendingMachines;
      console.log(this.expressVendingMachines)
      this.expressAccount=this.form.expressAccount;
      console.log(this.expressAccount)
      this.expressList=this.form.expressList;
      console.log(this.expressList)
      this.expressPaymentRecords=this.form.expressPaymentRecords;
      console.log(this.expressPaymentRecords)
      this.timeline=this.form.timeline;
      console.log(this.timeline)
          this.open=true;
      console.log("111111111111111111")
    },
    handleSelect(key) {
      console.log(key);
    },
    shouye() {
      this.$router.push(
          {path: "/HomeIndex"}
      )
    },
    other(){
      this.$router.push(
          {path: "/otherView"}
      )
    },
    dshezhi(){
      this.$router.push(
          {path: "/outkey"}
      )
    },
    xitong() {
      this.$router.push(
          {path: "/OutSystems"}
      )
    },
    shoufei(){

    },
    cuiqu(data){
      axios.post("http://localhost:10061/package/cuiqu",data).then(response => {
        if (response.data===200){
          this.$message({
            message: '催促成功',
            type: 'success'
          });
        }else {
          this.$message({
            message: '催促失败',
            type: 'error'
          });
        }
      })
      this.$message({
        message: '重发成功',
        type: 'success'
      });
    },
    chongfa(data){
      axios.post("http://localhost:10061/package/chongfa",data).then(response => {
        if (response.data===200){
          this.$message({
            message: '重发成功',
            type: 'success'
          });
        }else {
          this.$message({
            message: '重发失败',
            type: 'error'
          });
        }
      })
      this.$message({
        message: '重发成功',
        type: 'success'
      });
      this.$router.go(0);
    },
    ba(){
      this.$router.push(
          {path: "/dropdown"}
      )
    },
    bao() {
      this.$router.push(
          {path: "/OutPackage"}
      )
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    add() {
      this.open = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      axios.post("http://localhost:10061/package/show",this.queryParams).then(response => {
        console.log(response)
        this.advertisingList = response.data.list;
        console.log(this.advertisingList)
        this.total = response.data.total;
        this.loading = false;
      })
    },
    reset() {
      this.form = {
        id: null,
        client: null,
        Announcement: null,
        language: null,
        advertisement: null,
        Announcementcontent: null,
        detrusion: null,
        effluxtime: null,
        status: null,
        creation: null
      };
    },
    noticec() {
      this.$router.push(
          {path: "/homePage"}
      )
    },
  },

};
</script>

<style lang="less">
#app {
  margin-top: 0;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #545c64;
  display: flex; //设置显示为flex布局
  justify-content: space-between; //设置为flex左右布局
  padding-left: 0; //左内边距为0（Logo贴左边）
  align-items: center; //元素上下居中（防止右边按钮贴上下边）
  color: #fff;
  font-size: 18px;

  > div {
    //内嵌的div样式
    display: flex;
    align-items: center; //Logo和文字上下居中
    #fontLogo {
      width: 200px;
      margin-left: 10px; //文字左侧设置间距，防止与Logo紧贴
    }

    #fontName {
      width: 100px;
      margin-right: 10px;
    }
  }
}

#indexMenu {
  width: 100%;
}

.el-menu {
  background-color: #545c64;
}

.el-aside {
  background-color: #545c64;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

.el-main {
  background-color: #eaedf1;
  height: 1000px;
}
</style>
